<template>
  <div id="app">
    <BottomNav v-show="isShowTabbar"></BottomNav>
    <transition :name='aniType'>
        <router-view></router-view>
    </transition>
    
  </div>
</template>

<script>
  import BottomNav  from './components/BottomNav'
  export default {
    name: 'app',
    data:function(){
      return {
        showTop:false,
        aniType:'pageIn',
        isShowTabbar:true,
      }
    },
    components:{
      BottomNav
    },
    mounted:function(){
      // var toNum = this.$route.path.split('/').length
      //   if(toNum>1){
      //     this.isShowTabbar = false
      //   }else{
      //     this.isShowTabbar = true
      //   }
    },
    watch:{
      //判断动画类型
      $route:function(to,from){
        var tL = to.path.split('/').length
        var fL = from.path.split('/').length
        if(tL>fL){
          this.aniType = 'pageIn'
        }else if(tL < fL){
          this.aniType = 'pageOut'
        }else{
          this.aniType = ''
        }
         //判断是否显示Tabbar
        // if(tL>1){
        //   this.isShowTabbar = false
        // }else{
        //   this.isShowTabbar = true
        // }
      }
     
    }
  }
</script>

<style scoped>

  .pageIn-enter{
    transform: translateX(100%);
  }
  .pageIn-enter-active{
    transition: all 0.7s linear;
    width: 100%;
  }
  .pageIn-leave-active{
    transition: all 0.7s linear;
    transform: translateX(-80%);
    position: absolute;
    width: 100%;
  }
  .pageOut-enter{
    transform: translateX(-80%);
    width: 100%;
  }
  .pageOut-enter-active{
    transition: all 0.7s linear;
    width: 100%;
  }
  .pageOut-leave-active{
    transition: all 0.7s linear;
    transform: translateX(100%);
    position: absolute;
    width: 100%;
  }
</style>
